<template>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input :placeholder="$t('table.placeholder')" clearable v-model="query"></el-input>
            </el-col>
            <el-col :span="5">
                <el-button type="primary" @click="Search" icon="el-icon-search">{{
                        $t('table.search')
                }}</el-button>
                <el-button type="primary" @click="handleAdd('add')">{{
                        $t('table.adduser')
                }}</el-button>
            </el-col>
        </el-row>
        <el-table :data="roleList" ref="evtTable" border style="width: 100%" @expand-change="expandSelect">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-tag v-for="tag in options" :key="tag.id" closable>
                        {{ tag.authName }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column label="角色名称" prop="roleName"> </el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row, 'edit')">编辑
                    </el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                    <el-button size="mini" icon="el-icon-setting" type="warning" @click="Distribution(scope.row)">分配权限
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Dialog :visible.sync="visible" :type="type" @done="reload" :userInfo="userInfo"></Dialog>
        <TableTree :visibleTree.sync="visibleTree" @done="reload" :userInfo="userInfo"></TableTree>
    </el-card>
</template>

<script>
import { getRoles, DeleteRoles } from '@/api/http'
import EditDialogVue from './components/Dialog.vue'
import tableTreeVue from './components/tableTree.vue'

export default {
    name: 'roles',
    components: {
        Dialog: EditDialogVue,
        TableTree: tableTreeVue
    },
    data() {
        return {
            roleList: [],
            type: '',
            visible: false,
            visibleTree: false,
            userInfo: {},
            query: '',
            options: [],
        }
    },
    methods: {
        /* 刷新表格 */
        reload() {
            this.getRolesList()
        },
        // 搜索
        Search() {
            this.roleList = []
            this.getRolesList()
        },
        expandSelect(row, expandedRows) {
            this.options = []
            if (expandedRows.length) {
                if (row) {
                    this.filter(expandedRows)
                    this.options = [...new Set(this.options)]
                }
            }
        },
        filter(arr) {
            arr.forEach((el) => {
                if (el.children?.length > 0) {
                    this.filter(el.children)
                } else {
                    this.options.push(el)
                }
            })
        },
        //分配列表
        async getRolesList() {
            const { data, meta } = await getRoles(this.query)
            if (meta.status == 200) {
                if (this.query) {
                    this.roleList.push(data)
                } else {
                    this.roleList = data
                }
            }
        },
        // 添加
        handleAdd(type) {
            this.type = type
            this.userInfo = {}
            this.visible = true
        },
        //编辑
        handleEdit(row, type) {
            this.type = type
            this.userInfo = row
            this.visible = true
        },
        // 删除
        handleDelete(row) {
            this.$confirm(this.$t('dialog.deleteTitle'), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(async () => {
                    const { data, meta } = await DeleteRoles(row.id)
                    if (meta.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.getRolesList()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 分配权限
        Distribution(row) {
            this.userInfo = row
            this.visibleTree = true
        }
    },
    mounted() {
        this.getRolesList()
    }
}
</script>

<style lang="scss" scoped>
</style>
